<template>
	<view class="">
	<view style=" display: flex;justify-content: center;
		background-color: #CFEAF1;height: 44px;width: 100%;
		align-items: center;position: sticky;top: 0;z-index: 1;">
			<h3>订单</h3>
		</view>
	<view class="content">
		<view class="orders" v-for="(item,index) in foodorderlist" v-show="ww">
			<view class="" style="margin-bottom: 35px;display: block;">
				<text style="right: 50px;color: red;position: absolute;margin-top: 5px;">{{item.payment}}</text>
			</view>
			<view class="" v-for="(items,indexs) in foodorderlist[index].orderFoodList"
			style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">
				<h3 style="margin-left: 20px;width: 55px;">{{items.food.foodname}}</h3>
				
					<text class="money">单价:￥{{items.food.price}}</text>
					<text class="money">共计 {{items.sum}} 件</text>
					<text class="money">和为:￥{{numfilter(items.total)}}</text>	
					<button v-show="item.payment=='未支付'?true:false" style="
					width: 55px; font-size: 10px;height: 30px;" @click="deletefood(items.id,indexs,index,item.orderId)" >删除</button>
			</view>
			
			<view class="" style="display: block;height: 50px;">
				<h3 style="right: 70px;position: absolute;margin-top: 15px">合计：￥{{numfilter(item.together)}}</h3>
			</view>
			<view class="" style="justify-items: center;display: flex;align-items: center; margin-bottom: 10px;">
				<button v-show="item.payment=='未支付'?true:false" class="butter" type="default" @click="deleteorder(item.orderId,index)">删除订单</button>
				<button class="butter" v-show="item.payment=='未支付'?false:true" type="primary" @click="orderdetails(item.orderId)">查看详情</button>
				<button v-show="item.payment=='未支付'?true:false" class="butter" type="warn" @click="orderdetails(item.orderId)">去支付</button>
			</view>
		</view>
		
		
		<view class="" style="height: 80px;">
			
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payment:{},
				sum:'',
				foodorderlist:[],
				ww:true
			
				
			}
		},
		methods: {
			numfilter(value){
				// value = this.foodone.price*this.sum
				var total = parseFloat(value).toFixed(2)
				return total
			},
			
			deleteorder(orderId,index){
				if(confirm("确定删除该订单吗？")){
					uni.request({
						url: 'http://localhost:8484/ttwm/ttwm/deleteOrder',
						method: 'POST',
						data: {"orderId":orderId},
						success: res => {
							if(res.data.success){
								for (var i = 0; i < this.foodorderlist[index].orderFoodList.length; i++) {
									console.log(this.foodorderlist[index].orderFoodList[i].id);
									uni.request({
										url: 'http://localhost:8484/ttwm/ttwm/deleteOrderFood',
										method: 'POST',
										data: {"id":this.foodorderlist[index].orderFoodList[i].id},
										success: res => {
											if(res.data.success){
												this.foodorderlist.splice(index,1)
												
											}
										},
										fail: () => {},
										complete: () => {}
									});
								}
							}
						},
						fail: () => {},
						complete: () => {}
					});
				
				}
			},
			deletefood(id,indexs,index,orderId){
				if(this.foodorderlist[index].orderFoodList.length == 1){
					if(confirm("确定删除该订单吗？")){
					uni.request({
						url: 'http://localhost:8484/ttwm/ttwm/deleteOrder',
						method: 'POST',
						data: {"orderId":orderId},
						success: res => {
							if(res.data.success){
								this.foodorderlist.splice(index,1)
								}
						},
						fail: () => {},
						complete: () => {}
					});
					}
					uni.request({
						url: 'http://localhost:8484/ttwm/ttwm/deleteOrderFood',
						method: 'POST',
						data: {"id":id},
						success: res => {
							if(res.data.success){
								
								// location.reload();
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.request({
						url: 'http://localhost:8484/ttwm/ttwm/deleteOrderFood',
						method: 'POST',
						data: {"id":id},
						success: res => {
							if(res.data.success){
								this.foodorderlist[index].orderFoodList.splice(indexs,1)
								// location.reload();
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			orderdetails(orderId){
				console.log(orderId);
				uni.navigateTo({
					url:'/pages/orderdetails/orderdetails'
				})
				uni.setStorage({
					key:"orderid",
					data:orderId
				})
			}
		},
		onShow() {  
		   // this.ww = false
			uni.getStorage({
				key:"userid",
				success:res=> {
					if(res.data!=null){
					// console.log(res.data);
					this.users=res.data
					uni.request({
						url: 'http://localhost:8484/ttwm/ttwm/allOrderToFood',
						method: 'POST',
						data: {
							"userId":res.data.userId
						},
						success: res => {	
							if(res.data.success){
								this.foodorderlist=res.data.list
								for (var i = 0; i < this.foodorderlist.length; i++) {
									for (var j = 0; j < this.foodorderlist[i].orderFoodList.length; j++) {
										this.foodorderlist[i].together += this.foodorderlist[i].orderFoodList[j].total	
									}
								}
							}else{
								uni.showToast({
									
									title: '您还没有订单',
									icon: 'none'
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
					}else{
						uni.showToast({
							title: '未登录',
							icon: 'none'
						});
					}
				}
			});
			
		},
		onHide() {
			// this.&forceUpdate()
			this.foodorderlist=[]
		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.orders {
		width: 90vw;

		border-radius: 20px;
		margin-top: 5vw;
		background-color: white;
	}

	.butter {
		width: 100px;

	}
	
	.money{
		font-size: 10px;
		margin-right: 5px;
	}
</style>